<script lang="ts" setup>
import Location from '@/components/Location/index.vue'
import useModal from '@/hooks/useModal'
import { get, post, message, loadFile, checkBtnPermission } from '@/utils'
import { FormInstance, TableColumnData } from '@arco-design/web-vue'
import { BtnPermission } from '@/enum/permission'
import isEmpty from 'lodash/isEmpty'
import useTable from '@/hooks/useTable'
import cloneDeep from 'lodash/cloneDeep'
import PickerModal from './PickerModal.vue'
const { formatColumns } = useTable()
const formRef = ref() as Ref<FormInstance>
const props = defineProps<{ info: any }>()
const emit = defineEmits(['getInfo'])
const { store } = useModal()
type List = {
  address: {
    address: string
    city: string
    consignee: string
    district: string
    id: number
    isDefault: number
    lat: string
    lng: string
    mobile: string
    name: string
    province: string
    sellerId: number
  }
  addressId: number
  pickOpenDate: string
  pickOpenTime: string
  verifyId: string
  name: string
}
const detail = reactive({
  isOpenPick: 0,
  sellerPickConfigList: [
    {
      name: '地址1',
    },
    {
      name: '地址2',
    },
  ] as List[],
})

const submit = () => {
  formRef.value.validate(err => {
    if (!err) {
      if (!checkBtnPermission(BtnPermission.编辑)) return false
      const query = Object.assign({}, detail)
      post({ url: '/server-shop/sys-seller/seller/update/pick', data: query }, ({ code, msg }) => {
        message({
          type: code == 200 ? 'success' : 'error',
          content: msg,
        })
        if (code == 200) {
        }
      })
    }
  })
}
watch(
  () => props.info,
  n => {
    if (!isEmpty(n)) {
      Object.assign(detail, cloneDeep(n))
    }
  },
  { deep: true }
)
onMounted(() => {
  if (!isEmpty(props.info)) {
    Object.assign(detail, props.info)
  }
})
const columns = formatColumns([
  {
    title: '地址名称',
    dataIndex: 'name',
    render: ({ record }) => h('span', null, record.address.name),
  },
  {
    title: '核销员',
    dataIndex: 'verifyName',
  },
  {
    title: '营业时间',
    dataIndex: 'pickDate',
  },
  {
    title: '操作',
    dataIndex: 'op',
  },
]) as TableColumnData[]
const active = ref(-1)
const handleShow = (record, index) => {
  store.handleShow(record)
  active.value = index
}
const onConfirm = data => {
  if (active.value == -1) {
    detail.sellerPickConfigList.push(data)
  } else {
    detail.sellerPickConfigList[active.value] = data
  }
}
</script>
<template>
  <div class="picker">
    <a-form :model="detail" ref="formRef" @submit="submit" :label-col-props="{ span: 2 }" :wrapper-col-props="{ span: 21 }">
      <a-form-item field="isOpenPick" label="自提点" :rules="[{ required: false, message: '请输入自提点名称' }]" :validate-trigger="['change', 'blur']">
        <a-switch v-model="detail.isOpenPick" :checked-value="1" :unchecked-value="0" placeholder="请选择">
          <template #checked> 开启 </template>
          <template #unchecked> 关闭 </template>
        </a-switch>
      </a-form-item>
      <template v-if="detail.isOpenPick == 1">
        <a-form-item label="自提地址管理">
          <div style="flex: 2">
            <a-button type="primary" class="mb10" @click="handleShow({}, -1)"
              >新增
              <template #icon>
                <icon-plus />
              </template>
            </a-button>
            <a-table :columns="columns" style="width: 100%" :data="detail.sellerPickConfigList">
              <template #pickDate="{ record }"> {{ record.pickOpenDate }} {{ record.pickOpenTime }} </template>
              <template #op="{ record, rowIndex }">
                <a-button @click="handleShow(record, rowIndex)" type="text">编辑</a-button>
                <a-popconfirm content="确认删除该数据吗?" @ok="detail.sellerPickConfigList.splice(rowIndex, 1)">
                  <a-button type="text">删除</a-button>
                </a-popconfirm>
              </template>
            </a-table>
          </div>
        </a-form-item>
      </template>
      <a-form-item label="">
        <div style="flex: 2">
          <a-button type="primary" handle-submit html-type="submit" style="margin: auto; width: 200px">保存</a-button>
        </div>
      </a-form-item>
    </a-form>
    <PickerModal v-if="store.show" :info="store.info" v-model:show="store.show" @confirm="onConfirm" />
  </div>
</template>
<style lang="less" scoped></style>
